<template>
  <div class="dynamic_config">
    <van-form>
      <template v-for="d in formModel">
        <van-field
          @click.native="clickItemEn(d)"
          class="t_form_item"
          v-if="d.type === 'vanField'"
          :key="d.fieldId"
          v-model="d.value"
          :type="d.inputType"
          :label="d.label"
          :placeholder="d.placeholder"
          :required="d.required"
          :class="{ active: curItem.fieldId == d.fieldId }"
        >
        </van-field>
      </template>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
import 'vant/lib/field/style';
import 'vant/lib/form/style';
Vue.use(Field)
Vue.use(Form)
export default {
  name: 'DynamicConfig',
  data() {
    return {
      text: '',
      curItem: {}, // 当前选中的项
      formModel: [
        {
          type: 'vanField', // 类型
          fieldId: 'value1', // 字段
          value: '', // 当前的值
          inputType: 'text', // 输入框类型
          label: '姓名', // 文本
          placeholder: '请输入',
          required: false, // 是否必填
        },
        {
          type: 'vanField', // 类型
          fieldId: 'value2', // 字段
          value: '', // 当前的值
          inputType: 'tel', // 输入框类型
          label: '手机号', // 文本
          placeholder: '请输入',
          required: false, // 是否必填
        },
        {
          type: 'vanField', // 类型
          fieldId: 'value3', // 字段
          value: '', // 当前的值
          inputType: 'number', // 输入框类型
          label: '数字', // 文本
          placeholder: '请输入',
          required: false, // 是否必填
        },
        {
          type: 'vanField', // 类型
          fieldId: 'value4', // 字段
          value: '', // 当前的值
          inputType: 'password', // 输入框类型
          label: '密码', // 文本
          placeholder: '请输入',
          required: false, // 是否必填
        }
      ]
    }
  },
  methods: {
    /**
     * 点击当前项
     */
    clickItemEn(item) {
      this.curItem = item
    }
  }
}
</script>

<style lang="scss" scoped>
.dynamic_config {
  height: 100%;
  background-color: #f0f2f5;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: #fff;
}

.t_form_item {
  &:hover, &.active {
    overflow: visible;
  }
  &:hover::before {
    position: absolute;
    content: "";
    left: -1px;
    top: -1px;
    bottom: 0;
    right: -1px;
    border: 2px dashed #50ae55;
  }
  &.active::before {
    position: absolute;
    content: "";
    left: -1px;
    top: -1px;
    bottom: 0;
    right: -1px;
    border: 2px solid #50ae55;
  }
}
</style>
